<template>
  <div class="sysconfig">
    <div class="container">
      <!-- <el-form
        :model="timeValue"
        ref="timeValue"
        label-width="100px"
        class="ruleForm"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>登陆限制</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              class="green"
              icon="el-icon-position"
              v-if="timeSaveFlag"
              @click="timesavetForm('timeValue')"
              >保存</el-button
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              icon="el-icon-edit"
              v-if="timeEditFlag"
              @click="timeshowEdit"
              >修改</el-button
            >
          </div>
          <div>
            <el-row>
              <el-col :span="6">
                <el-form-item
                  label="开始时间"
                  prop="field1"
                  :rules="[{ required: true, message: '不能为空' }]"
                >
                  <el-time-select
                    v-model="timeValue.field1"
                    :disabled="timeDisabled"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '24:00'
                    }"
                    placeholder="选择时间"
                  >
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="结束时间"
                  prop="field2"
                  :rules="[{ required: true, message: '不能为空' }]"
                >
                  <el-time-select
                    v-model="timeValue.field2"
                    :disabled="timeDisabled"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '24:00'
                    }"
                    placeholder="选择时间"
                  >
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="禁止所有时间段登陆"
                  class="timestyle"
                  prop="field3"
                  :rules="[{ required: true, message: '不能为空' }]"
                >
                  <el-select
                    v-model="timeValue.field3"
                    placeholder="请选择"
                    :disabled="timeDisabled"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-form> -->
      <!-- 客户数量配置 -->
      <el-form
        :model="numLogValue"
        ref="numLogValue"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>客户资源配置</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              class="green"
              icon="el-icon-position"
              v-if="numSaveFlag"
              @click="savetForm2('numLogValue')"
              >保存</el-button
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              icon="el-icon-edit"
              v-if="numEditFlag"
              @click="numEdit"
              >修改</el-button
            >
          </div>
          <div class="inputStyles">
            <el-form-item
              prop="field2"
              label="每天最多可领取客户数量"
              :rules="[{ required: true, message: '不能为空' }]"
            >
              <el-input-number
                v-model="numLogValue.field2"
                placeholder=""
                class="inputStyle"
                :disabled="numDisabled"
              />
            </el-form-item>
            <el-form-item
              prop="field1"
              label="未联系客户回收周期(天)"
              :rules="[{ required: true, message: '不能为空' }]"
            >
              <el-input-number
                v-model="numLogValue.field1"
                placeholder=""
                class="inputStyle"
                :disabled="numDisabled"
              />
            </el-form-item>
            <el-form-item
              prop="field3"
              label="未联系客户到期前提醒(天)"
              :rules="[{ required: true, message: '不能为空' }]"
            >
              <el-input-number
                v-model="numLogValue.field3"
                class="inputStyle"
                :disabled="numDisabled"
              ></el-input-number>
            </el-form-item>
          </div>
        </el-card>
      </el-form>
    </div>
  </div>
</template>

<script>
import { timesavetForm, getData, add } from "@/api/systemSettings/sysconfig";
export default {
  components: {},
  props: [],
  data() {
    return {
      //数据
      tableData: [],
      //到期
      tipTimeValue: {},
      tipTimeEditFlag: true,
      tipTimeDisabled: true,
      tipTimeSaveFlag: false,
      //log
      logSaveFlag: false,
      logEditFlag: true,
      logDisabled: true,
      logValue: {},
      //show
      showLogValue: {},
      showEditFlag: true,
      showDisabled: true,
      showSaveFlag: false,
      //num
      numLogValue: {},
      numEditFlag: true,
      numDisabled: true,
      numSaveFlag: false,
      //time
      timeValue: {
        field1: "",
        field2: "",
        field3: "",
        id: ""
      },
      timeEditFlag: true,
      timeDisabled: true,
      timeSaveFlag: false,
      options: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "0",
          label: "否"
        }
      ]
    };
  },
  computed: {},
  created() {
    this.getData();
  },
  mounted() {},
  watch: {},
  methods: {
    //到期限制
    tipTimeEdit() {
      this.tipTimeSaveFlag = true;
      this.tipTimeEditFlag = false;
      this.tipTimeDisabled = false;
    },
    tipTimeSavetForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var _this = this;
          let params = {
            id: this.tipTimeValue.id,
            field1: this.tipTimeValue.field1
          };
          timesavetForm(params)
            .then(res => {
              if (res.code != "200") {
                setTimeout(() => {
                  this.$message.success("保存失败");
                }, 0.1 * 1000);
              } else {
                setTimeout(() => {
                  this.$message.success("保存成功");
                }, 0.1 * 1000);
                this.tipTimeSaveFlag = false;
                this.tipTimeEditFlag = true;
                this.tipTimeDisabled = true;
                this.getData();
              }
            })
            .catch(() => {
              console.log("error submit!!");
              return false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //登陆限制
    timeshowEdit() {
      this.timeSaveFlag = true;
      this.timeEditFlag = false;
      this.timeDisabled = false;
    },
    timesavetForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var _this = this;
          let params = {
            id: this.showLogValue.id,
            field1: this.showLogValue.field1
          };
          timesavetForm(this.timeValue)
            .then(res => {
              if (res.code != "200") {
                setTimeout(() => {
                  this.$message.error("保存失败");
                }, 0.1 * 1000);
              } else {
                setTimeout(() => {
                  this.$message.success("保存成功");
                }, 0.1 * 1000);
                this.timeSaveFlag = false;
                this.timeEditFlag = true;
                this.timeDisabled = true;
                this.getData();
              }
            })
            .catch(() => {
              console.log("error submit!!");
              return false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    savetForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var _this = this;
          let params = {
            id: this.showLogValue.id,
            field1: this.showLogValue.field1
          };
          timesavetForm(params)
            .then(res => {
              if (res.code != "200") {
                setTimeout(() => {
                  this.$message.error("保存失败");
                }, 0.1 * 1000);
              } else {
                setTimeout(() => {
                  this.$message.success("保存成功");
                }, 0.1 * 1000);
                this.showSaveFlag = false;
                this.showEditFlag = true;
                this.showDisabled = true;
                this.getData();
              }
            })
            .catch(() => {
              console.log("error submit!!");
              return false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    savetForm2(formName) {
      // add({
      //   type: 3,
      //   field1: this.numLogValue.field3
      // }).then(res => {
      //   if(res.code == 200){
      //     this.msgSuccess('保存成功')
      //     this.getData();
      //     this.numSaveFlag = false;
      //     this.numEditFlag = true;
      //     this.numDisabled = true;
      //   }
      // })
      this.$refs[formName].validate(valid => {
        if (valid) {
          var _this = this;
          let params1 = {
            id: 2,
            type: 1,
            field1: this.numLogValue.field1
          };
          let params2 = {
            id: 1,
            type: 2,
            field1: this.numLogValue.field2
          };
          let params3 = {
            id: 3,
            type: 3,
            field1: this.numLogValue.field3
          };
          timesavetForm(params1)
            .then(res => {
              this.getData();
            })
            .catch(() => {
              console.log("error submit!!");
              return false;
            });
          timesavetForm(params2)
            .then(res => {
              this.getData();
            })
            .catch(() => {
              console.log("error submit!!");
              return false;
            });
          timesavetForm(params3)
            .then(res => {
              if (res.code != "200") {
                setTimeout(() => {
                  this.$message.error("保存失败");
                }, 0.1 * 1000);
              } else {
                setTimeout(() => {
                  this.$message.success("保存成功");
                }, 0.1 * 1000);
                this.numSaveFlag = false;
                this.numEditFlag = true;
                this.numDisabled = true;
                this.getData();
              }
            })
            .catch(() => {
              console.log("error submit!!");
              return false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    showEdit() {
      this.showSaveFlag = true;
      this.showEditFlag = false;
      this.showDisabled = false;
    },
    numEdit() {
      this.numSaveFlag = true;
      this.numEditFlag = false;
      this.numDisabled = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var _this = this;
          let params = {
            id: this.logValue.id,
            field1: this.logValue.field1
          };
          timesavetForm(params)
            .then(res => {
              if (res.code != "200") {
                setTimeout(() => {
                  this.$message.error("保存失败");
                }, 0.1 * 1000);
              } else {
                setTimeout(() => {
                  this.$message.success("保存成功");
                }, 0.1 * 1000);
                this.logSaveFlag = false;
                this.logEditFlag = true;
                this.logDisabled = true;
                this.getData();
              }
            })
            .catch(() => {
              console.log("error submit!!");
              return false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    logEdit() {
      this.logSaveFlag = true;
      this.logEditFlag = false;
      this.logDisabled = false;
    },
    //获取数据
    getData() {
      getData({
        pageNum: 1,
        pageSize: 100
      })
        .then(res => {
          if (res.code == 200) {
            console.log(res.rows, "获取到的数据");
            this.tableData = res.rows;
            let i = this.tableData.find(item => {
              return item.type == 1;
            });
            this.numLogValue.field1 = i.field1;
            let j = this.tableData.find(item => {
              return item.type == 2;
            });
            this.numLogValue.field2 = j.field1;
            let k = this.tableData.find(item => {
              return item.type == 3;
            });
            this.numLogValue.field3 = k.field1;
          }
        })
        .catch(() => {
          console.log("error submit!!");
          return false;
        });
    }
  }
};
</script>

<style>
.timestyle .el-form-item__label {
  width: 150px !important;
}
.inputStyles .el-form-item__content {
  margin-left: 0 !important;
}
</style>
<style scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
}
.inputStyle {
  width: 35%;
}
.handle-box {
  margin-bottom: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  display: inline-block;
  margin-right: 50px;
}
.demo-ruleForm,
.ruleForm {
  width: 99%;
  display: inline-block;
}
.ruleForm .box-card {
  width: 100%;
}
</style>
